<template>
  <div class="layout">
    <div class="tip">
      <span class="total-price" v-text="getType"></span>
    </div>
    <div class="tip">
      <span class="title" v-text="item.title"></span>
    </div>
    <div class="tip">
      <span class="time" v-text="dateFormat"></span>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
  // import Public from '@/assets/js/public';
  import Moment from 'moment';

  export default {
    /** kebab-case */
    name: 'item-order-new',

    data() {
      return {
        item: this.itemObj
      };
    },
    /** 在声明 prop 的时候，其命名应该始终使用 camelCase，而在模板和 JSX 中应该始终使用 kebab-case。
     String/Number/Boolean/Function/Object/Array/Symbol */
    props: {
      itemObj: {
        required: true
      }
    },
    components: {},
    methods: {
    },
    computed: {
      getType() {
        return this.item.money + '元';
      },
      dateFormat() {
        // 时间
        return Moment(this.item.created * 1000).format('YYYY-MM-DD HH:mm');
      }
    },
    watch: {
      // 监听具体数据变化，并做相应的处理
      itemObj: function (val) {
        this.item = val;
      }
    },
    created() {
    }
  };
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import "../../assets/stylus/main.styl";

   .layout
    background-color white
    flex-y()
    width vw(345)
    margin vw(15)
    height vw(100)
    border-radius vw(5)

  .tip
    flex-x()
    width vw(345)
    height vw(100)
  .total-price
    display: flex
    justify-content:center
    position absolute
    word-vw(18, main-color)
    line-height vw(25)
    height vw(25)
    left vw(25)

  .title
    position absolute
    word-vw(14, second-ash)
    width vw(325)
    line-height vw(20)
    height vw(20)
    left vw(25)
    margin-top -2.466667vw
    ellipsis()

  .time
    display: flex
    justify-content:center
    position absolute
    word-vw(12, second-ash)
    line-height vw(17)
    height vw(17)
    left vw(25)

</style>
